{extend name="layout" /}
{block name="content"}
<div class="header-tab" style="margin-top: -45px;">
    <div class="tm-label-md tm-bg-white tm-border-bottom">
        <div class="main-content">
            <div class="main-tab">
                <div class="mui-segmented-control mui-segmented-control-itme2" id="segmentedControl">
                    <a class="mui-control-item tm-icon-btn mui-active" href="#item100">
                        <div class="tm-label-item">
                            <div class="tm-label">
                                全部
                            </div>
                        </div>
                    </a>
                    <a class="mui-control-item tm-icon-btn" href="#item200">
                        <div class="tm-label-item">
                            <div class="tm-label">
                                未使用
                            </div>
                        </div>
                    </a>
                    <a class="mui-control-item tm-icon-btn" href="#item300">
                        <div class="tm-label-item">
                            <div class="tm-label">
                                已使用
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- <div class="fixed-btn">
    <div class="tm-content tm-bg-white">
        <div class="tm-label">
            <a class="mui-btn radiu-green btn-radiu" href="">
                奖励金
            </a>
        </div>
    </div>
</div> -->
<div class="mui-content" style="margin-top: -44px;">
    <!-- 切换 -->
    <div class="main-tab-con">
        <div class="mui-control-content mui-active" id="item100">
            <div id="coupons-list" template coco-tag="coupons" coco-url="/v2/coupons/coupons_list" coco-data="{ state:'all'}">
                <script type="text/html" id="coupons-tpl">
                    {{# layui.each(d.response.list,function(index,item){ }}
                    <div class="card-item">
                        <div class="tm-flex">
                            <div class="tm-flex-1">
                                <div class="tm-icon-item">
                                    {{# if(item.type == 'baoyang'){ }}
                                    <div class="fonticon icon-bao">
                                    {{# }else if(item.type == 'xubao'){ }}
                                    <div class="fonticon icon-xu">
                                    {{# }else if(item.type == 'gouche'){ }}
                                    <div class="fonticon icon-gou">
                                    {{# }else if(item.type == 'zhihuan'){ }}
                                    <div class="fonticon icon-zhi">
                                    {{# } }}
                                    </div>
                                    <div class="tm-icon-label tm-mdx-size">
                                        <div class="tm-flex-row">
                                            <span class="uk-text-seccess tm-font-boldx">
                                                {{ item.name }}
                                            </span>
                                        </div>
                                        <div class="tm-flex-row">
                                            <span class="tm-font-gray">
                                                {{ item.price }}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tm-flex-foorer uk-text-right">
                                <div class="tm-flex-row">
                                    <span class="uk-text-seccess tm-font-boldx">
                                        {{ item.couponsno }}
                                    </span>
                                    <a class="layer-t" href="javascript:;"><img src="{$images_path}tm-coup-qr.png" width="20" height="20"></a>
                                </div>
                                <div class="tm-flex-row">
                                    {{# if(item.status == 1){ }}
                                    <a class="mui-btn mui-disabled btn-radiu" href="javascript:;">
                                        已使用
                                    </a>
                                    {{# }else if(item.isgive == 1){ }}
                                    <a class="mui-btn mui-btn-blue btn-radiu" href="javascript:;">
                                        转赠
                                    </a>
                                    {{# }else{ }}
                                    <span class="uk-text-danger">
                                        不可转赠
                                    </span>
                                    {{# } }}
                                </div>
                            </div>
                        </div>
                        <div class="card-bd-info tm-font-gray">
                            <div class="tm-flex-row-xs">
                                车主姓名：<span>赵四</span>
                            </div>
                            <div class="tm-flex-row-xs">
                                车主品牌：<span>一汽奥迪</span>
                            </div>
                            <div class="tm-flex-row-xs">
                                车牌号：<span>鲁Al8888</span>
                            </div>
                            <div class="tm-flex-row-xs">
                                车架号：<span>A0389548589456</span>
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="tm-flex">
                                <div class="tm-flex-1">
                                    <span class="tm-font-gray tm-df-size">
                                        获取时间：{{ date('Y-m-d', item.addtime ) }}
                                    </span>
                                </div>
                                <div class="tm-flex-footer">
                                    <span class="tm-font-gray tm-df-size">
                                        有效期至：{{ date('Y-m-d', item.endtime ) }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    {{# }) }}
                </script>
            </div>
        </div>
        <div class="mui-control-content" id="item200">
            <div id="nucoupons-list" template coco-tag="nucoupons" coco-url="/v2/coupons/coupons_list" coco-data="{ state:'nouse'}">
                <script type="text/html" id="nucoupons-tpl">
                    {{# layui.each(d.response.list,function(index,item){ }}
                    <div class="card-item">
                        <div class="tm-flex">
                            <div class="tm-flex-1">
                                <div class="tm-icon-item">
                                    {{# if(item.type == 'baoyang'){ }}
                                    <div class="fonticon icon-bao">
                                    {{# }else if(item.type == 'xubao'){ }}
                                    <div class="fonticon icon-xu">
                                    {{# }else if(item.type == 'gouche'){ }}
                                    <div class="fonticon icon-gou">
                                    {{# }else if(item.type == 'zhihuan'){ }}
                                    <div class="fonticon icon-zhi">
                                    {{# } }}
                                    </div>
                                    <div class="tm-icon-label tm-mdx-size">
                                        <div class="tm-flex-row">
                                            <span class="uk-text-seccess tm-font-boldx">
                                                {{ item.name }}
                                            </span>
                                        </div>
                                        <div class="tm-flex-row">
                                            <span class="tm-font-gray">
                                                {{ item.price }}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tm-flex-foorer uk-text-right">
                                <div class="tm-flex-row">
                                    <span class="uk-text-seccess tm-font-boldx">
                                        {{ item.couponsno }}
                                    </span>
                                    <a class="layer-t" href="javascript:;"><img src="{$images_path}tm-coup-qr.png" width="20" height="20"></a>
                                </div>
                                <div class="tm-flex-row">
                                    {{# if(item.isgive == 1){ }}
                                    <a class="mui-btn mui-btn-blue btn-radiu" href="javascript:;">
                                        转赠
                                    </a>
                                    {{# }else{ }}
                                    <span class="uk-text-danger">
                                        不可转赠
                                    </span>
                                    {{# } }}
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="tm-flex">
                                <div class="tm-flex-1">
                                    <span class="tm-font-gray tm-df-size">
                                        获取时间：{{ date('Y-m-d', item.addtime ) }}
                                    </span>
                                </div>
                                <div class="tm-flex-footer">
                                    <span class="tm-font-gray tm-df-size">
                                        有效期至：{{ date('Y-m-d', item.endtime ) }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    {{# }) }}
                </script>
            </div>
        </div>
        <div class="mui-control-content" id="item300">
            <div id="couponsd-list" template coco-tag="couponsd" coco-url="/v2/coupons/coupons_list" coco-data="{ state:'used'}">
                <script type="text/html" id="couponsd-tpl">
                    {{# layui.each(d.response.list,function(index,item){ }}
                    <div class="card-item">
                        <div class="tm-flex">
                            <div class="tm-flex-1">
                                <div class="tm-icon-item">
                                    {{# if(item.type == 'baoyang'){ }}
                                    <div class="fonticon icon-bao">
                                    {{# }else if(item.type == 'xubao'){ }}
                                    <div class="fonticon icon-xu">
                                    {{# }else if(item.type == 'gouche'){ }}
                                    <div class="fonticon icon-gou">
                                    {{# }else if(item.type == 'zhihuan'){ }}
                                    <div class="fonticon icon-zhi">
                                    {{# } }}
                                    </div>
                                    <div class="tm-icon-label tm-mdx-size">
                                        <div class="tm-flex-row">
                                            <span class="uk-text-seccess tm-font-boldx">
                                                {{ item.name }}
                                            </span>
                                        </div>
                                        <div class="tm-flex-row">
                                            <span class="tm-font-gray">
                                                {{ item.price }}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tm-flex-foorer uk-text-right">
                                <div class="tm-flex-row">
                                    <span class="uk-text-seccess tm-font-boldx">
                                        {{ item.couponsno }}
                                    </span>
                                    <a class="layer-t" href="javascript:;"><img src="{$images_path}tm-coup-qr.png" width="20" height="20"></a>
                                </div>
                                <div class="tm-flex-row">
                                    <a class="mui-btn mui-disabled btn-radiu" href="javascript:;">
                                        已使用
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="tm-flex">
                                <div class="tm-flex-1">
                                    <span class="tm-font-gray tm-df-size">
                                        获取时间：{{ date('Y-m-d', item.addtime ) }}
                                    </span>
                                </div>
                                <div class="tm-flex-footer">
                                    <span class="tm-font-gray tm-df-size">
                                        有效期至：{{ date('Y-m-d', item.endtime ) }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    {{# }) }}
                </script>
            </div>
        </div>
    </div>
    <!-- 切换 end -->
</div>
<!--转赠弹窗-->
<div class="mui-popover mui-popover-action mui-popover-bottom" id="forward">
    <div class="main-content">
        <div class="sharing-title">
            转赠到
        </div>
    </div>
    <ul class="mui-table-view tm-bg-transparent sharing-group">
        <li class="mui-table-view-cell">
            <ul class="uk-grid">
                <li class="uk-width-1-5">
                    <a class="tm-icon-item-v" href="">
                        <div class="tm-icon">
                            <img alt="" height="22" src="images/weixin-2.png" width="22"/>
                        </div>
                        <div class="tm-icon-label">
                            微信
                        </div>
                    </a>
                </li>
                <li class="uk-width-1-5">
                    <a class="tm-icon-item-v" href="">
                        <div class="tm-icon">
                            <img alt="" height="22" src="images/quan.png" width="22"/>
                        </div>
                        <div class="tm-icon-label">
                            朋友圈
                        </div>
                    </a>
                </li>
            </ul>
        </li>
    </ul>
    <ul class="mui-table-view offthis-sheet uk-text-center tm-bg-white">
        <li class="mui-table-view-cell">
            <a href="#forward">
                取消
            </a>
        </li>
    </ul>
</div>

<!--layer-->
<!-- 二维码弹窗 -->
<div id="layer" style="display: none;">
    <div class="tm-layer-header tm-default-size tm-font-default">
        
    </div>
    <div class="tm-layer-body">
       <div class="tm-layerimg-box" style="width: 200px;height: 200px;">
           <img src="">
       </div>
    </div>
</div>
<!--layer end-->

<!--layer-->
<!-- 二维码弹窗 -->
<div id="layer2" style="display: none;">
    <div class="tm-layer-header tm-default-size tm-font-default">
        
    </div>
    <div class="tm-layer-body">
       <input type="" name="" placeholder="请输入车牌号">
    </div>
    <div class="tm-layer-footer">
        1
    </div>
</div>
<!--layer end-->

<!-- layer-t -->
{/block}


{block name="script"}

<!--layer-->
<script type="text/javascript">
    mui(document).on('tap',".layer-t", function() {
        var couponsno = $(this).prev().text();
        $("#layer").find('img').attr('src', '/v2/index/showqr?couponsno='+couponsno);
        layer.open({
            type: 1,
            title: false,
            area: ['200px', '200px'],
            closeBtn: 0,
            skin: 'tm-page-layer',
            shade: 0.5,
            shadeClose: true,
            content: $('#layer')
        });
    })

    mui(document).on('tap',".layer-t2", function() {
        layer.open({
            type: 1,
            title: false,
            closeBtn: 0,
            skin: 'tm-page-layer',
            shade: 0.5,
            shadeClose: true,
            content: $('#layer2')
        });
    })
</script>
    
    
    <!--layer-->
{/block}
